<html>
<head>
<title>Layers</title>
<style type="text/css">
.layer1 {
	position: absolute;
	left: 280px;
	top: 50px;
	width: 200px;
	height: 100px;
	z-index: 10;
	background-color: magenta;
}

.layer2 {
	position: absolute;
	left: 20px;
	top: 50px;
	width: 200px;
	height: 100px;
	z-index: 5;
	background-color: cyan;
}

.ctrlPanel {
	position: absolute;
	left: 20;
	top: 200;
	width: 400;
	height: 250;
	z-index: 0;
	background-color: yellow;
}

p.dirButtons {
	margin-left: 20%;
	margin-top: 50px;
}

button.up {
	position: relative;
	top: -30px;
	left: 100px;
}

button.right {
	position: relative;
	top: 0px;
	left: 35px;
}

button.left {
	position: relative;
	top: 0px;
	left: 25px;
}

button.down {
	position: relative;
	top: 30px;
	left: -55px;
}
</style>

<script type="text/javascript">
	function $(elem) {
		return document.getElementById(elem);
	}

	function getStyle(el, styleProp) {
		var x = $(el);
		if (x.currentStyle)
			var y = x.currentStyle[styleProp];
		else if (window.getComputedStyle)
			var y = document.defaultView.getComputedStyle(x, null)
					.getPropertyValue(styleProp);
		return y;
	}

	function onSwap() {
		if (hasClass($('layer1'), 'layer1')) {
			removeClass($('layer1'), 'layer1');
			addClass($('layer1'), 'layer2');
			removeClass($('layer2'), 'layer2');
			addClass($('layer2'), 'layer1');
		} else {
			removeClass($('layer1'), 'layer2');
			addClass($('layer1'), 'layer1');
			removeClass($('layer2'), 'layer1');
			addClass($('layer2'), 'layer2');
		}
	}

	function move(position, offset) {
		return (parseInt(position) + offset) + 'px';
	}

	function moveUp() {
		if ($('rLayer1').checked) {
			$('layer1').style.top = move(getStyle('layer1', 'top'), -10);
		} else if ($('rLayer2').checked) {
			$('layer2').style.top = move(getStyle('layer2', 'top'), -10);
		} else if ($('rCtrlLayer').checked) {
			$('ctrlPanel').style.top = move(getStyle('ctrlPanel', 'top'), -10);
		}
	}

	function moveDown() {
		if ($('rLayer1').checked) {
			$('layer1').style.top = move(getStyle('layer1', 'top'), 10);
		} else if ($('rLayer2').checked) {
			$('layer2').style.top = move(getStyle('layer2', 'top'), 10);
		} else if ($('rCtrlLayer').checked) {
			$('ctrlPanel').style.top = move(getStyle('ctrlPanel', 'top'), 10);
		}
	}

	function moveRight() {
		if ($('rLayer1').checked) {
			$('layer1').style.left = move(getStyle('layer1', 'left'), 10);
		} else if ($('rLayer2').checked) {
			$('layer2').style.left = move(getStyle('layer2', 'left'), 10);
		} else if ($('rCtrlLayer').checked) {
			$('ctrlPanel').style.left = move(getStyle('ctrlPanel', 'left'), 10);
		}
	}

	function moveLeft() {
		if ($('rLayer1').checked) {
			$('layer1').style.left = move(getStyle('layer1', 'left'), -10);
		} else if ($('rLayer2').checked) {
			$('layer2').style.left = move(getStyle('layer2', 'left'), -10);
		} else if ($('rCtrlLayer').checked) {
			$('ctrlPanel').style.left = move(getStyle('ctrlPanel', 'left'), -10);
		}
	}

	var addEventSimple = function(el, evt, fn) {
		if (el.addEventListener) {
			el.addEventListener(evt, fn, false);
		} else if (el.attachEvent) {
			el.attachEvent('on' + evt, fn);
		}
	};
	// alias
	var addEvent = addEventSimple;

	var hasClass = function(ele, cls) {
		return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
	}

	var addClass = function(ele, cls) {
		if (!hasClass(ele, cls)) {
			ele.className += " " + cls;
		}
	}

	var removeClass = function(ele, cls) {
		if (hasClass(ele, cls)) {
			var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
			ele.className = ele.className.replace(reg, ' ');
		}
	}

	var replaceClass = function(ele, onCls, repCls) {
		removeClass(ele, onCls);
		addClass(ele, repCls);
	}

</script>

</head>
<body>
	<div id="layer1" class="layer1" >
		<h2>Layer 1</h2>
		Layer 1: on right
	</div>
	<div id="layer2" class="layer2">
		<h2>Layer 2</h2>
		Layer 2: on left
	</div>
	<div id="ctrlPanel" class="ctrlPanel">
		<h2>Control Panel</h2>
		Move layers around: <br /> <input type="radio" name="layer" value="1"
			id="rLayer1" />Layer1 <input type="radio" name="layer" value="2"
			id="rLayer2" />Layer2 <input type="radio" name="layer" value="0"
			id="rCtrlLayer" />This Panel
		<p class="dirButtons">
			<button onclick="onSwap()">Swap</button>
			<button class="up" onclick="moveUp()">Up</button>
			<button class="left" onclick="moveLeft()">Left</button>
			<button class="right" onclick="moveRight()">Right</button>
			<button class="down" onclick="moveDown()">Down</button>
		</p>
	</div>
</body>
</html>